<template>
  <el-tabs v-model="activeName" @tab-click="handleScoreClick">
    <el-tab-pane label="评价列表" name="commentlist">
      <en-table-layout
        toolbar
        pagination
        :tableData="tableData">
        <div slot="toolbar" class="inner-toolbar">
          <div class="toolbar-btns">
            <el-button size="mini" type="primary" @click="handleBatExamine">批量审核</el-button>
          </div>
          <div class="toolbar-search">
            <en-table-search
              @search="searchEvent"
              @advancedSearch="advancedSearchEvent"
              advanced
              advancedWidth="465"
              placeholder="请输入商品名称或评论内容"
             >
              <template slot="advanced-content">
                <el-form ref="advancedForm" :model="advancedForm" label-width="80px">
                  <el-form-item label="会员名称">
                    <el-input v-model="advancedForm.member_name" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <el-input v-model="advancedForm.goods_name" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="评论内容">
                    <el-input v-model="advancedForm.content" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="评价">
                    <el-select v-model="advancedForm.grade" placeholder="请选择" clearable>
                      <el-option label="好评" value="good"/>
                      <el-option label="中评" value="neutral"/>
                      <el-option label="差评" value="bad"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="回复状态">
                    <el-select v-model="advancedForm.reply_status" placeholder="请选择" clearable>
                      <el-option label="已回复" value="1"/>
                      <el-option label="未回复" value="0"/>
                    </el-select>
                  </el-form-item>
                </el-form>
              </template>
            </en-table-search>
          </div>
        </div>
      </en-table-layout>
      <div class="my-table-out" :style="{maxHeight: tableMaxHeight + 'px'}">
        <table class="my-table" v-loading="loading">
          <thead>
            <tr class="bg-order">
              <th class="shoplist-header">
                <input class='awsui-checkbox tableCheckbox' @click="selectAll" v-model="checkAll" type='checkbox'/>商品信息</th>
              <th>评论</th>
              <th>追评</th>
              <th style="width: 120px;">用户</th>
              <th style="width: 120px;">操作</th>
            </tr>
          </thead>
          <tbody v-for="(item, index) in tableData" :key="index">
            <tr style="width: 100%;height: 10px;">
              <tr class="bg-order">
                <td colspan="5">
                  <input class='tableCheckbox' @click="selectSingle(item, index)" v-model="checkboxItems[index]" type='checkbox'/>
                  <span>订单编号：{{item.order_sn}}</span>
                  <a class="shop-name" target="_blank" :href="`${MixinBuyerDomain}/goods/${item.goods_id}`">{{ item.goods_name }}</a>
                </td>
              </tr>
              <tr>
                <!--商品信息-->
                <td style="min-width:200px;text-align: center;">
                  <a v-if="item.goods_images" target="_blank" :href="`${MixinBuyerDomain}/goods/${item.goods_id}`">
                    <img :src="item.goods_images.original" style="max-width: 150px;height: 80px;display: inline-block;margin-right: 10px">
                  </a>
                </td>
                <!--初评论-->
                <td style="text-align: left;width: 500px;">
                  <div class="comment-content">
                    <!--评论时间-->
                    <p v-if="item.create_time" class="comment-info">
                      <i class="comment-content-name">评论时间：</i>{{item.create_time | unixToDate}}
                    </p>
                    <p v-if="item.create_time" class="comment-info">
                      <i class="comment-content-name">评分：</i>{{item.grade | gradeFilter}}
                    </p>
                    <!--评论内容-->
                    <p v-if="item.content" class="comment-info">
                      <i class="comment-content-name">评论内容 :</i> {{ item.content }}
                    </p>
                    <!--评论图片信息-->
                    <p v-if="item.have_image === 1">
                      <el-popover v-for="(imgsrc, _index) in item.images" :key="_index" placement="top" trigger="hover">
                        <img slot="reference" :src="imgsrc" class="goods-image"/>
                        <img :src="imgsrc" style="width: 300px;height: 300px;"/>
                      </el-popover>
                    </p>
                    <!--回复评论-->
                    <p v-if="item.reply && item.reply.content" class="reply-comment">
                      <span>回复时间：{{item.reply.create_time | unixToDate}}</span>
                      <span>回复评论：{{ item.reply.content }}</span>
                    </p>
                  </div>
                </td>
                <!--追加评论-->
                <td style="text-align: left">
                  <div class="comment-content" v-if="item.additional_comment && item.additional_comment.audit_status === 'PASS_AUDIT'">
                    <!--评论时间-->
                    <p v-if="item.create_time" class="comment-info">
                      <i class="comment-content-name">评论时间：</i>{{item.additional_comment.create_time | unixToDate}}
                    </p>
                    <!--评论内容-->
                    <p v-if="item.content" class="comment-info">
                      <i class="comment-content-name">评论内容 :</i> {{ item.additional_comment.content }}
                    </p>
                    <!--评论图片信息-->
                    <p v-if="item.have_image === 1">
                      <el-popover v-for="(imgsrc, index) in item.additional_comment.images" :key="index" placement="top" trigger="hover">
                        <img slot="reference" :src="imgsrc" class="goods-image"/>
                        <img :src="imgsrc" style="width: 300px;height: 300px;"/>
                      </el-popover>
                    </p>
                    <!--回复评论-->
                    <p v-if="item.additional_comment.reply && item.additional_comment.reply.content" class="reply-comment">
                      <span>回复时间：{{item.additional_comment.reply.create_time | unixToDate }}</span>
                      <span>回复评论 :{{ item.additional_comment.reply.content }}</span>
                    </p>
                  </div>
                </td>
                <!--用户-->
                <td>{{ item.member_name }}</td>
                <!--操作-->
                <td>
                  <el-button
                    type="primary"
                    v-if="item.reply_status == 0"
                    @click="handleReplyComment(item)"
                    class="reply-btn">初评回复
                  </el-button>
                  <el-button
                    type="primary"
                    v-if="item.additional_comment && item.additional_comment.reply_status === 0 && item.additional_comment.audit_status === 'PASS_AUDIT'"
                    @click="handleReplyAppendComment(item)"
                    class="reply-btn">追评回复
                  </el-button>
                </td>
              </tr>
          </tbody>
          <div v-if="tableData.length === 0" class="empty-block">
            暂无数据
          </div>
        </table>
    
        <el-pagination
          slot="pagination"
          v-if="pageData"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
          :current-page="pageData.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.data_total">
        </el-pagination>
      </div>
      <!--追评回复-->
      <el-dialog title="回复评论" :visible.sync="replyAppendCommentShow" width="30%">
        <el-form :model="appendCommentForm" :rules="replyRules" ref="appendCommentForm">
          <el-form-item label="追评内容" :label-width="formLabelWidth">
            <span style="word-wrap:break-word;">{{appendCommentForm.comment_content}}</span>
          </el-form-item>
          <el-form-item label="追评图片" :label-width="formLabelWidth" v-if="appendCommentForm.have_image === 1">
            <img
              v-for="(imgsrc, index) in appendCommentForm.comment_imgs"
              :key="index"
              :src="imgsrc"
              style="margin-right:3px;width:50px;height:50px;">
          </el-form-item>
          <el-form-item label="回复内容" :label-width="formLabelWidth" prop="reply_content">
            <el-input type="textarea" rows="5" :maxlength="500" v-model="appendCommentForm.reply_content" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="replyAppendCommentShow = false">取 消</el-button>
          <el-button type="primary" @click="saveAppendCommentReply('appendCommentForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!--初评回复-->
      <el-dialog title="回复评论" :visible.sync="replyCommentShow" width="30%">
        <el-form :model="commentForm" :rules="replyRules" ref="commentForm">
          <el-form-item label="评论内容" :label-width="formLabelWidth">
            <span style="word-wrap:break-word;">{{commentForm.comment_content}}</span>
          </el-form-item>
          <el-form-item label="评论图片" :label-width="formLabelWidth" v-if="commentForm.have_image === 1">
            <img
              v-for="(imgsrc, index) in commentForm.comment_imgs"
              :key="index"
              :src="imgsrc"
              style="margin-right:3px;width:50px;height:50px;">
          </el-form-item>
          <el-form-item label="回复内容" :label-width="formLabelWidth" prop="reply_content">
            <el-input type="textarea" rows="5" :maxlength="500" v-model="commentForm.reply_content" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="replyCommentShow = false">取 消</el-button>
          <el-button type="primary" @click="saveCommentReply('commentForm')">确 定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="店铺评分" name="score" class="shop-score-container">
      <div class="shop-score">
        <div class="score-title">宝贝与描述相符</div>
        <div class="score-pic">
          <dl class="score-pic-content">
            <dt>
              <em :style="socreDescription">{{ shopInfo.shop_description_credit | socre }}</em>
            </dt>
            <dd>非常不满</dd>
            <dd>不满意</dd>
            <dd>一般</dd>
            <dd>满意</dd>
            <dd>非常满意</dd>
          </dl>
        </div>
      </div>
      <div class="shop-score">
        <div class="score-title">卖家的服务态度</div>
        <div class="score-pic">
          <dl class="score-pic-content">
            <dt>
              <em :style="socreService">{{ shopInfo.shop_service_credit | socre }}</em>
            </dt>
            <dd>非常不满</dd>
            <dd>不满意</dd>
            <dd>一般</dd>
            <dd>满意</dd>
            <dd>非常满意</dd>
          </dl>
        </div>
      </div>
      <div class="shop-score">
        <div class="score-title">卖家的发货速度</div>
        <div class="score-pic">
          <dl class="score-pic-content">
            <dt>
              <em :style="socreDelivery">{{ shopInfo.shop_delivery_credit | socre  }}</em>
            </dt>
            <dd>非常不满</dd>
            <dd>不满意</dd>
            <dd>一般</dd>
            <dd>满意</dd>
            <dd>非常满意</dd>
          </dl>
        </div>
      </div>
    </el-tab-pane>

    <!--批量审核-->
    <el-dialog title="评价审核" :visible.sync="batExamineDialog" width="600px">
      <el-form ref="batExamineForm" :model="batExamineForm" label-width="100px" :rules="batExamineFormRules">
        <el-form-item label="审核意见:">
          <el-radio-group v-model="batExamineForm.audit_status">
            <el-radio label="PASS_AUDIT">审核通过</el-radio>
            <el-radio label="REFUSE_AUDIT">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注:">
          <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 6}" v-model="batExamineForm.audit_remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearBatExamine('batExamineForm')">取 消</el-button>
        <el-button type="primary" @click="handleClick('batExamineForm')">确 定</el-button>
      </span>
    </el-dialog>

  </el-tabs>
</template>

<script>
  import * as API_comment from '@/api/comment'
  import { CategoryPicker } from '@/components'

  export default {
    name: 'goodsList',
    components: {
      [CategoryPicker.name]: CategoryPicker
    },
    data() {
      return {
        /** 当前面板 */
        activeName: 'commentlist',
        /** 选中数组 */
        selectionids: [],
        /** 单个选中状态 */
        checkboxItems: [],
        /** 全选选中状态 */
        checkAll: false,

        /** 店铺信息 */
        shopInfo: this.$store.getters.shopInfo,

        /** 列表loading状态 */
        loading: false,

        /** 列表参数 */
        params: {
          page_no: 1,
          page_size: 10
        },

        /** 列表数据 */
        tableData: [],

        /** 列表分页数据 */
        pageData: [],

        /** 高级搜索数据 */
        advancedForm: {},

        /** 是否显示初评回复（审核）框*/
        replyCommentShow: false,
        /** 是否显示追评回复（审核）框*/
        replyAppendCommentShow: false,
        /** 是否显示批量审核框*/
        batExamineDialog: false,
        batExamineForm: {
          audit_status: 'PASS_AUDIT',
          audit_remark: ''
        },
        batExamineFormRules: {
          audit_status: [
            {
              required: true,
              message: '请选择是否通过审核',
              trigger: 'blur'
            }
          ]
        },

        /** 表单项的marginLeft */
        formLabelWidth: '120px',

        /** 弹框 初评表单*/
        commentForm: {
          /** 评论id */
          comment_id: '',

          /** 是否有图 */
          have_image: '',

          /** 评论内容 */
          comment_content: '',

          /** 评论图片数组 */
          comment_imgs: [],

          /** 回复内容 */
          reply_content: ''
        },
        /** 弹框 追评表单*/
        appendCommentForm: {
          /** 评论id */
          comment_id: '',

          /** 是否有图 */
          have_image: '',

          /** 评论内容 */
          comment_content: '',

          /** 评论图片数组 */
          comment_imgs: [],

          /** 回复内容 */
          reply_content: ''
        },

        /** 检验工具 */
        replyRules: {
          reply_content: [
            { required: true, message: '回复内容不可为空', trigger: 'blur' },
            { max: 500, message: '回复内容最多500个字', trigger: 'blur' }
          ]
        },

        /** 表格最大高度 */
        tableMaxHeight: (document.body.clientHeight - 54 - 34 - 50 - 15)
      }
    },
    computed: {
      socreDescription() {
        return {
          'left': this.shopInfo.shop_description_credit
            ? parseFloat((this.shopInfo.shop_description_credit / 5).toFixed(2) * 100 - 7.5) + '%' : 0
        }
      },
      socreService() {
        return {
          'left': this.shopInfo.shop_service_credit
            ? parseFloat((this.shopInfo.shop_service_credit / 5).toFixed(2) * 100 - 7.5) + '%' : 0
        }
      },
      socreDelivery() {
        return {
          'left': this.shopInfo.shop_delivery_credit
            ? parseFloat((this.shopInfo.shop_delivery_credit / 5).toFixed(2) * 100 - 7.5) + '%' : 0
        }
      }
    },
    filters: {
      socre(val) {
        return val.toFixed(2)
      },
      gradeFilter(val) {
        switch (val) {
          case 'bad':
            return '差评'
          case 'neutral':
            return '中评'
          default:
            return '好评'
        }
      }
    },
    mounted() {
      this.GET_CommmentsList()
      window.onresize = this.countTableHeight
    },
    methods: {
      /** 获取选中项全选*/
      selectAll() {
        if (this.selectionids.length < this.tableData.length) {
          this.selectionids = this.tableData.map(item => item.comment_id);
          this.checkboxItems.forEach((item, index) => {
            this.$set(this.checkboxItems, index, true);
          })
        } else {
          this.selectionids = [];
          this.checkboxItems.forEach((item, index) => {
            this.$set(this.checkboxItems, index, false);
          })
        }
      },
      /** 获取选中项单选*/
      selectSingle(chooseItem, index) {
        let curIndex = this.selectionids.findIndex((item) => {
          return item === chooseItem.comment_id;
        })
        if (curIndex < 0) {
          this.selectionids.push(chooseItem.comment_id);
        } else {
          this.selectionids.splice(curIndex, 1)
        }
        // 非全选
        if (this.selectionids.length < this.tableData.length) {
          this.checkAll = false;
        }
        // 选中与取消
        this.checkboxItems[index] = !this.checkboxItems[index];
      },
      socre(val) {
        if (Number.isInteger(val)) {
          return {
            left: (val / 5).toFixed(2) + '%'
          }
        } else {
          return {
            left: 0
          }
        }
      },

      /** 计算高度 */
      countTableHeight() {
        this.tableHeight = (document.body.clientHeight - 54 - 35 - 50)
      },

      /** 切换面板 */
      handleScoreClick(tab) {
        this.activeName = tab.name
        if (this.activeName === 'commentlist') {
          this.GET_CommmentsList()
        }
      },

      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.GET_CommmentsList()
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.GET_CommmentsList()
      },

      /** 搜索事件触发 */
      searchEvent(data) {
        this.params = {
          ...this.params,
          keyword: data
        }
        Object.keys(this.advancedForm).forEach(key => delete this.params[key])
        this.GET_CommmentsList()
      },

      /** 高级搜索事件触发 */
      advancedSearchEvent() {
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        delete this.params.keyword
        this.GET_CommmentsList()
      },

      GET_CommmentsList() {
        this.loading = true
        this.params.comment_type = 'INITIAL'
        API_comment.getCommentList(this.params).then(response => {
          this.loading = false
          this.pageData = {
            page_no: response.page_no,
            page_size: response.page_size,
            data_total: response.data_total
          }
          this.tableData = response.data
          this.tableData.forEach((item, index) => {
            this.checkboxItems[index] = false;
          })
        })
      },

      /** 商家初评回复*/
      handleReplyComment(item) {
        this.replyCommentShow = true
        this.commentForm = {
          comment_id: item.comment_id,
          isPass: 1,
          have_image: item.have_image,
          comment_content: item.content,
          comment_imgs: item.images,
          reply_content: ''
        }
      },
      /** 商家追评评回复*/
      handleReplyAppendComment(item) {
        this.replyAppendCommentShow = true
        this.appendCommentForm = {
          comment_id: item.additional_comment.comment_id,
          isPass: 1,
          have_image: item.additional_comment.have_image,
          comment_content: item.additional_comment.content,
          comment_imgs: item.additional_comment.images,
          reply_content: ''
        }
      },
      /** 保存评论回复*/
      saveCommentReply(FormName) {
        this.$refs[FormName].validate((valid) => {
          if (valid) {
            API_comment.replyComment(this.commentForm.comment_id, { reply: this.commentForm.reply_content }).then(() => {
              this.replyCommentShow = false
              this.GET_CommmentsList()
              this.$message.success('保存成功')
            })
          }
        })
      },
      /** 保存追加评论回复*/
      saveAppendCommentReply(FormName) {
        this.$refs[FormName].validate((valid) => {
          if (valid) {
            API_comment.replyComment(this.appendCommentForm.comment_id, { reply: this.appendCommentForm.reply_content }).then(() => {
              this.replyAppendCommentShow = false
              this.GET_CommmentsList()
              this.$message.success('保存成功')
            })
          }
        })
      },
      handleBatExamine () {
        if ( this.selectionids.length === 0) {
          this.$message.error('请选择要审核的信息！');
        } else {
          this.batExamineDialog = true;
        }
      },
      // 清除表单
      clearBatExamine(batExamineForm) {
        this.batExamineDialog = false;
        this.batExamineForm = {
          audit_status: 'PASS_AUDIT',
          audit_remark: ''
        }
      },
      handleClick(batExamineForm) {
        this.$refs[batExamineForm].validate(valide => {
          if (valide) {
            this.batExamineForm.comment_ids = this.selectionids.toString();
            console.log(this.batExamineForm)
            API_comment.auditComment(this.batExamineForm).then(response => {
              this.$message.success(response);
              this.batExamineDialog = false;
              this.GET_CommmentsList();
            }).catch((error) => {
              this.$message.error(error)
            })
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>

  /deep/ .reply-btn{
    margin-bottom:10px;
    margin-left:0;
  }
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }

  /deep/ .el-table td:not(.is-left) {
    text-align: center;
  }

  .inner-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .toolbar-search {
    margin-right: 10px;
  }

  /*暂无数据时的样式*/
  /deep/ .el-table__empty-block {
    display: none;
  }

  .empty-block {
    position: relative;
    min-height: 60px;
    line-height: 60px;
    text-align: center;
    width: 139%;
    height: 100%;
    font-size: 14px;
    color: #606266;
  }

  /*表格信息*/
  .my-table-out{
    overflow-y: scroll;
    text-overflow: ellipsis;
    width: 100%;
    max-height: 800px;
  }
  .my-table {
    width: 100%;
    margin-bottom: 40px;
    background: #fff;
    border-collapse: collapse;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-size: 14px;
    font-bold: 700;
    .bg-order {
      background: #FAFAFA;
      line-height: 35px;
    }
    thead {
      width: 100%;
      th {
        border: 1px solid #ebeef5;
        border-collapse: collapse;
        color: #909399;
        padding: 10px 20px;
      }
    }
    tbody {
      width: 100%;
      margin-top: 10px;
      td {
        border: 1px solid #ebeef5;
        border-collapse: collapse;
        vertical-align: middle;
        text-align: center;
        padding:0 10px;
      }
      td:first-child {
        text-align: left;
      }
      /*商品名称*/
      a.shop-name {
        color: #0579c6;
        outline: none;
        font-weight: bold;
      }
      /*评论内容*/
      .comment-content {
        margin: 0;
	      max-width: 500px;
        p {
	        margin: 10px 0;
	        word-break: break-all;
	        word-wrap:break-word;
          i {
            font-weight: bold;
          }
        }
        p.comment-info {
          color: #999999;
        }
        p.reply-comment {
          color: #f42424;
          span{
            display: block;
            line-height:20px;
	          word-break: break-all;
          }
        }
      }
    }
    /*图片*/
    .goods-image {
      width: 50px;
      height: 50px;
      margin: 3px;
    }
  }

  /*分页信息*/
  section>div {
    position: relative;
  }
  .el-pagination {
    text-align: right;
    width: 100%;
    height: 40px;
    background: #ffffff;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e5e5e5;
    padding: 5px 20px;
  }
  /** 店铺评分 */
  .shop-score-container {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
  }
  .shop-score {
    width: 60%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    margin: 50px 0;
    padding: 15px;
    div.score-title {

    }
    /** 评分图标标识 */
    div.score-pic {
      .score-pic-content {
        display: block;
        margin: 0 auto;
        padding: 0;
        width: 352px;
        height: 20px;
        dt {
          height: 20px;
          position: relative;
          background: url(./images/rate_column.gif) no-repeat 0px -88px;
        }
        em {
          position: absolute;
          background: url(./images/rate_column.gif) no-repeat 0 0;
          top: -26px;
          color: #fff;
          display: block;
          font-weight: 600;
          height: 30px;
          line-height: 16px;
          padding: 0 0 7px;
          text-align: center;
          width: 37px;
          font-size: 14px;
        }
      }
      dd {
        width: 65px;
        display: inline-block;
        margin-left: 0px;
        font-size: 14px;
      }
    }
  }
  .shoplist-header{
    position: relative;
    .awsui-checkbox{
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }
// .tableCheckbox:checked {
//   background: #1673ff;
//   border: solid 1px #1673ff;
// }
// .tableCheckbox {
//   width: 10px;
//   height: 10px;
//   background-color: #ffffff;
//   border: solid 1px #dddddd;
//     // font-size: 0.8rem;
//   outline: none;
//   margin: 0;
//   padding: 0;
//   position: relative;
//   display: inline-block;
//   vertical-align: top;
//   cursor: default;
//   -webkit-appearance: none;
//   -webkit-user-select: none;
//   user-select: none;
//   -webkit-transition: background-color ease 0.6s;
//   transition: background-color ease 0.6s;
// }
// .tableCheckbox:checked::after {
//   content: '';
//   top: 0.1rem;
//   left: 0.09rem;
//   position: absolute;
//   background: transparent;
//   border: #fff solid 2px;
//   border-top: none;
//   border-right: none;
//   height: 0.12rem;
//   width: 0.25rem;
//   -moz-transform: rotate(-45deg);
//   -ms-transform: rotate(-45deg);
//   -webkit-transform: rotate(-45deg);
//   transform: rotate(-45deg);
// }
</style>

